import React from "react";

// 第二步，从react-redux里面解构connect
// connect是一个函数，它的返回值是一个高阶组件
// 里面有两个函数作为参数
import { connect } from "react-redux";

// 将仓库的state的值映射到组件的props里面
const mapStateToProps = (state) => {
  return {
    count: state.count,
  };
};

// 将仓库的dispatch映射到组件的props里面
const mapDispatchToProps = (dispatch) => {
  return {
    add() {
      dispatch({ type: "add" });
    },
  };
};

const App = (props) => {
  console.log(props);
  return (
    <>
      <h2>react结合redux</h2>
      <button>-</button>
      <span>{props.count}</span>
      <button onClick={props.add}>+</button>
    </>
  );
};

export default connect(mapStateToProps, mapDispatchToProps)(App);
